New Features in ECMAScript 2021 (with code examples) | 您所在的位置:网站首页 › ECMAScript 2021 Language Specification › New Features in ECMAScript 2021 (with code examples) |
In this tutorial we are going to learn about the new features we can use in the latest version of ECMAScript 2021 with some coding examples IntroductionThis Ecma Standard defines the ECMAScript 2022 Language. It is the twelfth edition of the ECMAScript Language Specification. Since publication of the first edition in 1997, ECMAScript has grown to be one of the world's most widely used general-purpose programming languages. It is best known as the language embedded in web browsers but has also been widely adopted for server and embedded applications.Introduction This Ecma Standard defines the ECMAScript 2022 Language. It is the twelfth edition of the ECMAScript Language Specification. Since publication of the first edition in 1997, ECMAScript has grown to be one of the world's most widely used general-purpose programming languages. It is best known as the language embedded in web browsers but has also been widely adopted for server and embedded applications. ECMA 2021ECMAScript 2021, the 12th edition, introduces the replaceAll method for Strings; Promise.any, a Promise combinator that short-circuits when an input value is fulfilled; AggregateError, a new Error type to represent multiple errors at once; logical assignment operators (??=, &&=, ||=); WeakRef, for referring to a target object without preserving it from garbage collection, and FinalizationRegistry, to manage registration and unregistration of cleanup operations performed when target objects are garbage collected; separators for numeric literals (1_000); and Array.prototype.sort was made stable. replaceAllAssuming we have a constant named string const string = "Javascript is the best web scripting language. Javascript can be used for both front end and backend"; Enter fullscreen mode Exit fullscreen modeand we want to replace the word Javascript with Typescript we normally would use the replace method const string = "Javascript is the best web scripting language. Javascript can be used for both front end and backend"; console.log(string.replace("Javascript", "Typescript")); Enter fullscreen mode Exit fullscreen modeWhat if we want to replace all instances of Javascript with Typescript That is where the replaceAll method comes to shine const string = "Javascript is the best web scripting language. Javascript can be used for both front end and backend"; console.log(string.replaceAll("Javascript", "Typescript")); Enter fullscreen mode Exit fullscreen mode Private Methodslets create a class named People and we have will have some methods class People { showName() { console.log("My name is Faithful") } showAge() { console.log("Faithful is 20") } } Enter fullscreen mode Exit fullscreen modeTo access the methods inside the classes we first need to instantiate the class class People { showName() { console.log("My name is Faithful") } showAge() { console.log("Faithful is 20") } } const people = new People() people.showName() people.showAge() Enter fullscreen mode Exit fullscreen modeWe can see that My name is Faithful and Faithful is 20 gets logged on console. if we want to make showAge() a private method inside the class People so outside the scope of the class it is not accessible we just add the # sign in front of the showAge method like this #showAge class People { showName() { console.log("My name is Faithful") } #showAge() { console.log("Faithful is 20") } } const people = new People() people.showName() people.showAge() Enter fullscreen mode Exit fullscreen modewe can see the result on our console. An error is saying people.showAge is not a function. This is because #showAge() is now a private method inside the class People and can only be access via a public method in side the class People. Now lets try and access the private method #showAge() first we create new public method called showAll() inside the class People from this public method we can access the private method #showAge() and since our new method is a public one we would be able to print the age on the console. Take a look at the code below class People { showName() { console.log("My name is Faithful"); } #showAge() { console.log("Faithful is 20"); } showAll() { this.showName() this.#showAge(); } } const people = new People(); people.showAll(); Enter fullscreen mode Exit fullscreen modewe can see that the error has disappeared and we can now access our private method via a public one showAll() Private AccessorsPrivate accessors work very similar to private methods lets create a class named People and we have will have some methods class People { get Name() { return "Faithful" } get Age() { return 20 } } let people = new People(); console.log(people.Age); Enter fullscreen mode Exit fullscreen modeWe can see 20 gets logged on console. if we want to make Age a private accessor inside the class People so outside the scope of the class it is not accessible we just add the # sign in front of the Age method like this #Age class People { get Name() { return "Faithful" } get #Age() { return 20 } } let people = new People(); console.log(people.Age) Enter fullscreen mode Exit fullscreen modewe can see the result on our console is undefined. Now lets try and access the private method #Age() first we create new public method called publicAge() inside the class People from this public method we can access the private method #Age() and since our new method is a public one we would be able to print the age on the console. Take a look at the code below class People { get Name() { return "Faithful" } get #Age() { return 20 } get publicAge() { return this.#Age } } let people = new People(); console.log(people.publicAge) Enter fullscreen mode Exit fullscreen modewe can see that the error has disappeared and we can now access our private accessor via a public one publicAge() Promise.any()Promise.any() is like the opposite of Promise.all(). Promise.any() resolves if any of the supplied promised is resolved unlike promise.all() which waits for all promises to resolve before it resolves. lets take a look at the example below Basically we have 3 promises that resolves at random times. We have used setTimeout() function to set a time taken for each promise to resolve and we used Math.floor(Math.random) to give a random time to the setTimeout function so we really dont know which promise resolves first. This exaclty what happens in real world secenario. const prom1 = new Promise((resolve, reject) => { setTimeout( () => resolve("this is the first promise"), Math.floor(Math.random() * 100) ); }); const prom2 = new Promise((resolve, reject) => { setTimeout( () => resolve("this is the second promise"), Math.floor(Math.random() * 100) ); }); const prom3 = new Promise((resolve, reject) => { setTimeout( () => resolve("this is the third promise"), Math.floor(Math.random() * 100) ); }); (async function() { const result = await Promise.any([prom1, prom2, prom3]); console.log(result); // Prints "A", "B" or "C" })(); Enter fullscreen mode Exit fullscreen modefrom the result in console, we can see that our second promise resolves first. Wait! what if none of the promises resolve? Well, Promise.any() throws an AggregateError exception. We will handle it in a try catch block. Take a look at the example below const rejected = new Promise((resolve, reject) => { setTimeout( () => reject("this is the first promise"), Math.floor(Math.random() * 100) ); }); try { (async function() { const result = await Promise.any([rejected]); console.log(result); })(); } catch(error) { console.log(error.errors); } Enter fullscreen mode Exit fullscreen mode Numeric SeparatorsThis feature enables developers to make their numeric literals more readable by creating a visual separation between groups of digits. Large numeric literals are difficult for the human eye to parse quickly, especially when there are long digit repetitions. 1000000000 // Is this a billion? a hundred millions? Ten millions? 101475938.38 // what scale is this? what power of 10? Enter fullscreen mode Exit fullscreen mode ExamplesRegular Number Literals let budget = 1_000_000_000_000; // What is the value of `budget`? It's 1 trillion! // // Let's confirm: console.log(budget === 10 ** 12); // true Enter fullscreen mode Exit fullscreen modeBinary Literals let nibbles = 0b1010_0001_1000_0101; // Is bit 7 on? It sure is! // 0b1010_0001_1000_0101 // // We can double check: console.log(!!(nibbles & (1 16) & 0xFF; console.log(a.toString(16), a); // a0, 160 // What's the value of the middle byte? It's B0, or 176. // Let's just make sure... let b = (message >> 8) & 0xFF; console.log(b.toString(16), b); // b0, 176 // What's the value of the lower most byte? It's C0, or 192. // Again, let's prove that: let c = message & 0xFF; console.log(c.toString(16), b); // c0, 192 Enter fullscreen mode Exit fullscreen modelets view our result in console Logical Assignment Operator Logical Assignment Operator with &&Logical assignment operator combines the logical operations(&&, || or ??) with assignment. var x = 1; var y = 2; x &&= y; console.log(x); // 2 Enter fullscreen mode Exit fullscreen modeTechincally here's what is actually going on if(x) { x = y } Enter fullscreen mode Exit fullscreen modeSince x is a truthy value, it is assigned with the value of y, ie 2. Just like the way we did with &&, we can do with || and ??. x &&= y; x ||= y; x ??= y; Enter fullscreen mode Exit fullscreen mode Logical assignment operator with || var x = 1; var y = 2; x ||= y; console.log(x); Enter fullscreen mode Exit fullscreen modeThat means, the assignment operation happens only if x is a falsy value. In our code, x contains 1 which is a truthy value and hence, assignment does not happen. That is why our code prints 1 in the console. Logical assignment operator with ???? is Nullish Coalescing operator in JavaScript. It specifically checks if a value is null or undefined. var a; var b = a ?? 5; console.log(b); Enter fullscreen mode Exit fullscreen modeIn line 2, if the value of a is null or undefined, the right hand side of ?? is evaluated and assigned to b. Let us now consider ?? along with =. var x; var y = 2; x ??= y; console.log(x); // Enter fullscreen mode Exit fullscreen modeHere the value of x is undefined. So the right hand side expression is evaluated and sets x to 2. You can edit and test the code hereHappy Coding! |
CopyRight 2018-2019 实验室设备网 版权所有 |